// ignore_for_file: deprecated_member_use

import 'package:flutter/material.dart';
import 'package:flutter_layout/base/index.dart';
import 'package:flutter_layout/main/base_stateful_widget.dart';

// Expanded、Flexible和Spacer都是具有权重属性的组件，可以控制Row、Column、Flex的子控件如何布局的控件。
class SpacerViewPage extends BaseStatefulWidget {
  const SpacerViewPage({Key? key}) : super(key: key);

  @override
  _ConstrainPageState createState() => _ConstrainPageState();
}

class _ConstrainPageState extends State<SpacerViewPage> {
  int currentIndex = 0;
  PageController pageController = PageController();

  var pageLsit = [
    const CachePage(
      title: "1",
    ),
    const CachePage(
      title: "2",
    ),
    const CachePage(
      title: "3",
    ),
  ];
  var titleTool = [
    "Expanded",
    "Flexible",
    "Spacer",
  ];
  String? toolTitle;

  @override
  Widget build(BuildContext context) {
    var bottomItem = <BottomNavigationBarItem>[];
    for (var i = 0; i < pageLsit.length; i++) {
      bottomItem.add(BottomNavigationBarItem(icon: const Icon(Icons.access_alarm_rounded), label: "$i"));
    }
    return Scaffold(
      appBar: AppBar(
        title: Text(toolTitle ?? titleTool[0]),
      ),
      body: PageView(
        physics: const PageScrollPhysics(),
        controller: pageController,
        children: pageLsit,
        onPageChanged: (value) {
          currentIndex = value;
          _changeItem(currentIndex);
        },
      ),
      bottomNavigationBar: BottomNavigationBar(
        onTap: (value) {
          setState(() {
            currentIndex = value;
            showToast("$currentIndex");
            pageController.jumpToPage(currentIndex);
          });
        },
        type: BottomNavigationBarType.fixed,
        currentIndex: currentIndex,
        // backgroundColor: Colors.yellow,
        items: bottomItem,
      ),
    );
  }

  void _changeItem(int value) {
    setState(() {
      currentIndex = value;
      toolTitle = titleTool[currentIndex];
    });
  }
}

class CachePage extends StatefulWidget {
  final String? title;
  const CachePage({Key? key, this.title}) : super(key: key);

  @override
  _CachePageState createState() => _CachePageState();
}

class _CachePageState extends State<CachePage> with AutomaticKeepAliveClientMixin {
  // String? title;
  // _CachePageState({this.title});
  @override
  Widget build(BuildContext context) {
    super.build(context);
    if ("1" == widget.title) {
      return getExpanded();
    }
    if ("2" == widget.title) {
      return getFlexible();
    }
    return getSpacer();
  }

  // ignore: unused_element
  _getPhysics(String? title) {
    return const BouncingScrollPhysics();
  }

// Flexible中fit参数表示填满剩余空间的方式，说明如下：
// tight：必须（强制）填满剩余空间。
// loose：尽可能大的填满剩余空间，但是可以不填满。
  Widget getFlexible() {
    return Scaffold(
        body: Column(
      children: [
        SizedBox(
          height: 300,
          child: Column(
            children: <Widget>[
              Flexible(
                flex: 1,
                child: Container(
                  color: Colors.blue,
                  alignment: Alignment.center,
                  child: const Text(
                    '1 Flex/ 6 Total',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
              Flexible(
                flex: 2,
                child: Container(
                  color: Colors.red,
                  alignment: Alignment.center,
                  child: const Text(
                    '2 Flex/ 6 Total',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
              Flexible(
                flex: 3,
                child: Container(
                  color: Colors.green,
                  alignment: Alignment.center,
                  child: const Text(
                    '3 Flex/ 6 Total',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
            ],
          ),
        ),
        const SizedBox(
          height: 10,
        ),
        Row(
          children: <Widget>[
            Container(
              color: Colors.blue,
              height: 50,
              width: 100,
            ),
            Flexible(
                // flex: 1,
                fit: FlexFit.tight, //强制撑满
                child: Container(
                  alignment: Alignment.center,
                  color: Colors.red,
                  height: 50,
                  child: const Text(
                    'Container',
                    style: TextStyle(color: Colors.white),
                    textAlign: TextAlign.center,
                  ),
                )),
            Container(
              color: Colors.blue,
              height: 50,
              width: 100,
            ),
          ],
        ),
        const SizedBox(
          height: 10,
        ),
        Row(
          children: <Widget>[
            Container(
              color: Colors.blue,
              height: 50,
              width: 100,
            ),
            Flexible(
                child: Container(
              color: Colors.red,
              height: 50,
              alignment: Alignment.center,
              child: const Text(
                'Container',
                style: TextStyle(color: Colors.white),
              ),
            )),
            Container(
              color: Colors.blue,
              height: 50,
              width: 100,
            ),
          ],
        ),
        const SizedBox(
          height: 10,
        ),
        Row(
          children: <Widget>[
            Container(
              color: Colors.blue,
              height: 50,
              width: 100,
            ),
            Flexible(
              // fit: FlexFit.tight,
              child: OutlineButton(
                onPressed: () {},
                child: const Text('OutlineButton'),
              ),
            ),
            Container(
              color: Colors.blue,
              height: 50,
              width: 100,
            ),
          ],
        ),
        const SizedBox(
          height: 10,
        ),
      ],
    ));
  }

  Widget getExpanded() {
    return Scaffold(
      body: Column(
        children: [
          const Text(
              "Expanded继承字Flexible，fit参数固定为FlexFit.tight，也就是说Expanded必须（强制）填满剩余空间。上面的OutlineButton想要充满剩余空间可以使用Expanded："),
          Row(
            children: <Widget>[
              Container(
                color: Colors.blue,
                height: 50,
                width: 100,
              ),
              Expanded(
                child: OutlineButton(
                  onPressed: () {},
                  child: const Text('OutlineButton'),
                ),
              ),
              Container(
                color: Colors.blue,
                height: 50,
                width: 100,
              ),
            ],
          )
        ],
      ),
    );
  }

  Widget getSpacer() {
    return Scaffold(
      body: Column(children: [
        const Padding(
          padding: EdgeInsets.all(8.0),
          child: Text(
              "Spacer的通过Expanded的实现的，和Expanded的区别是：Expanded可以设置子控件，而Spacer的子控件尺寸是0，因此Spacer适用于撑开Row、Column、Flex的子控件的空隙，用法如下："),
        ),
        const SizedBox(height: 10),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            children: <Widget>[
              Container(
                width: 110,
                height: 50,
                color: Colors.green,
              ),
              const Spacer(
                flex: 2,
              ),
              Container(
                width: 110,
                height: 50,
                color: Colors.blue,
              ),
              const Spacer(
                flex: 2,
              ),
              Container(
                width: 110,
                height: 50,
                color: Colors.red,
              ),
            ],
          ),
        )
      ]),
    );
  }

  @override
  bool get wantKeepAlive => true;
}
